<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <pt-table :columns="columns" :dataSource="tableData"
      :options="options" :fetch="getTableList" :pagination="pagination" />
  </div>
</template>
<script>
export default {
  data() {
    return {// 表单配置
      columns: [{
        prop: '发货流水号', label: '发货流水号', minWidth: 140, align: 'left'
      },{
        prop: '订单号', label: '订单号', minWidth: 120, align: 'left'
      },{
        prop: '下单时间', label: '下单时间', minWidth: 140, align: 'left'
      },{
        prop: '收货人', label: '收货人', minWidth: 100, align: 'left'
      },{
        prop: '发货时间', label: '发货时间', minWidth: 140, align: 'left'
      },{
        prop: '发货单状态', label: '发货单状态', minWidth: 140, align: 'left'
      },{
        prop: '操作人', label: '操作人', minWidth: 100, align: 'left'
      },{
        button: true, label: '操作', width: 120, fixed: 'right', align: 'right',
        group: [{
          name: '查看', type: 'text', onClick: row => this.handleClick(row.id)
        }]
      }],
      pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
      options: { // 表单外观
        mutiSelect: false, //  多选则 mutiSelect
        index: false, // 显示序号
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      },
      tableData: [{}], //表单数据
      curOrderlist: {}, //修改 选择数据
      config: [{
        key: 'agentIds', type: 'agentList', label: '区域'
      },{
        key: 'businessname', type: 'input', label: '商家名称', placeholder: '请输入商家'
      },{
        key: 'username', type: 'input', label: '发货单流水号', placeholder: '请输入发货单流水号'
      },{
        key: 'username', type: 'input', label: '订单号', placeholder: '请输入订单号'
      },{
        key: 'ordercode', type: 'input', label: '收件人', placeholder: '请输入收件人'
      },{
        key: 'selectOrderStatus', type: 'select', label: '发货单状态', option: [{
          label: '全部', id: ''
        },{
          label: '已发货', id: '1'
        },{
          label: '正常', id: '2'
        }]
      },{
        key: 'page', type: 'button', group: [{
          name: '查看', type: 'primary', onClick: () => { }
        },{
          name: '重置',  type: 'info', onClick: () => this.reset()
        }]
      }],
      params: {
        page: 0,
        size: 10,
        agentIds: [], //区域
        businessname: '', // 商家名称
        usermobile: '', // 用户手机号
        ordercode: '', // 订单号
        selectOrderTime: '', // 下单时间
        selectOrderStatus: '' // 订单状态
      },
      diyLoading: false, //自定义等待
      loadingSubMit: false, // 表单等待
      dialogTableVisible: false,
      refundVisible: false, // 退款弹窗
      refund: { // 操作退款的数据
        reason: '', // 退款原因
        orderItemIdStr: [], // 退款的商品
        orderId: null
      },
      refundPrice: null, // 退款金额
      checkAll: false, // 选中所有的商品
      orderGoodsList: {} // 商品详情
    }
  },
  methods: {
    search() { // 搜索
      this.pagination.curPage = 1
      this.pagination.page = 0
      this.getTableList()
    },
    reset() { // 重置
      this.pagination.curPage = 1
      for (const key in this.params) {
        if (key === 'page') {
          this.pagination.page = 0
        } else if (key === 'size') {
          this.pagination.size = 10
        } else if (key === 'agentIds') {
          this.params[key] = []
        } else {
          this.params[key] = ''
        }
      }
      this.getTableList()
    },
    handleClick() {
      this.$router.push('/main/sc_order/sendGoodsDetail')
    },
    getTableList() { //获取订单数据
      this.options.loading = true
      const params = { ...this.params }
      params.page = this.pagination.page
      params.size = this.pagination.size
      params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
      setTimeout(() => {
        this.options.loading = false
        // this.tableData = res.data.list || []
        // this.pagination.total = res.data.total || 0
      }, 1000)
    }
  }
}
</script>
<style scoped>
 
</style>
